import { memo, useEffect, useState } from 'react';
import { Carousel } from '@/pages/Home/components/Carousel';
import { HotTop } from './components/HotTop';
import { NoticeBoard } from './components/NoticeBoard';
import { AnimatePresence, motion } from 'framer-motion';
import { Divider, Tag } from 'antd';
import { getMockAllTags, getMockCarousals } from '@/Utils/localForage';
import { type Article, type CarouselSlide, type HotArticle, type Tags } from '@/types';
import { ArticleList } from '@/components/ArticleList';
import { CompreSection } from './components/CompreSection';
import { getHotArticles, getLatestArticles } from '@/services/articles';
import Loading from '@/components/Loading';

const Home = memo(() => {
  const [latestArticles, setLatestArticles] = useState<Article[]>([]);
  const [loading, setLoading] = useState(true);
  const [tagsData, setTagsData] = useState<Tags[] | null>(null);
  const [carouselList, setCarouselList] = useState<CarouselSlide[]>([]);
  const [hotArticles, setHotArticles] = useState<HotArticle>({
    techHotList: [],
    compreHotList: [],
  });
  useEffect(() => {
    // 获取标签数据
    getMockAllTags().then(res => {
      setTagsData(res);
    })
    // 获取轮播图数据
    getMockCarousals().then(res => {
      if (res) {
        setCarouselList(res);
      }
    })
    // 获取最新文章
    getLatestArticles().then(res => {
      if (res) {
        setLatestArticles(res);
      }
    })
    // 获取热榜列表
    getHotArticles().then(res => {
      if (res) {
        setHotArticles(res);
      }
    })
  }, []);
  useEffect(() => {
    setInterval(() => {
      setLoading(false);
    }, 1000);
  });
  const tabs: { label: string; data: Article[] }[] = [
    { label: "热门文章", data: hotArticles.compreHotList },
    { label: "最新", data: latestArticles },
  ];
  // 只保存 label 从状态派生值
  const [selectedLabel, setSelectedLabel] = useState(tabs[0].label);
  // 每次渲染时动态获取 tab
  const selectedTab = tabs.find((tab) => tab.label === selectedLabel)!;
  return (
    <div className="space-y-8">
      <Loading show={loading} />
      {/* 轮播图部分 */}
      <section className="relative">
        <Carousel slides={carouselList} />
      </section>
      {/* 主要内容区域 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <section className="lg:col-span-2">
          <NoticeBoard />
          <div className="bg-white rounded-xl shadow-sm p-6 mt-4">
            <nav className='flex justify-between'>
              <ul className='flex items-center gap-2 text-[18px]'>
                {tabs.map((item) => (
                  <motion.li
                    key={item.label}
                    initial={false}
                    transition={{ duration: 0.3, ease: "easeInOut" }}
                    className={`cursor-pointer relative pb-2 mx-2`}
                    style={{
                        color:
                        selectedTab.label === item.label ? "#1677ff" : "gray",
                    }}
                    onClick={() => setSelectedLabel(item.label)}
                  >
                    {item.label}
                    <motion.span
                      initial={{ scaleX: 0 }}
                      animate={{
                        scaleX: selectedTab.label === item.label ? 1 : 0,
                      }}
                      transition={{ duration: 0.3, ease: "easeInOut" }}
                      className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-500 origin-center"
                    />
                  </motion.li>
                ))}
              </ul>
            </nav>
            <Divider style={{ margin: "8px 0", borderTop: "1px solid #e5e7eb" }} />
            {/*分类标签区域 */}
            <div className='flex flex-wrap gap-2'>
              {
                tagsData?.map((item) => {
                  return (
                    <Tag key={item.id} color="purple" className='cursor-pointer'>
                      {item.name}
                    </Tag>
                  )
                })
              }
            </div>
            <Divider style={{ margin: "8px 0", borderTop: "1px solid #e5e7eb" }} />
            <main className="space-y-4 mt-4">
              <AnimatePresence mode='wait'>
                <div key={selectedTab ? selectedTab.label : "empty"}>
                  <ArticleList articles={selectedTab.data} />
                </div>
              </AnimatePresence>
            </main>
          </div>
        </section>
        {/* 侧边区域 */}
        <section className="lg:col-span-1">
          {/* 创作中心 */}
          <CompreSection />
          {/* 文章热榜 */}
          <HotTop {...hotArticles} />
        </section>
      </div>
    </div>
  );
});

Home.displayName = 'Home';

export default Home;
